<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片三次异常加载</title>
</head>
<body>
<img src="https://www.baidu.cmo/img.png" alt="百度不存在图片">

<script>
    const path = 'https://www.baidu.cmo/img.png'
    const zhanPath = 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
    const img = document.querySelector('img')
    let retryCount = 0
    img.onerror =() => {
        errorHandler(img)
    }
    function errorHandler(Ele){
       let timer =  setTimeout(()=>{
            if(retryCount >= 2 ) {
                console.log('加载三次后失败，使用默认图片')
                Ele.src =zhanPath
                clearTimeout(timer)
                return
            }
           retryCount++
           console.log('重试次数',retryCount)
             Ele.src = path
        }, 1500)
    }
</script>
</body>
</html>
